<template>
    <div id='HotRecommendation'>
      <ul class="title">
        <li>
          {{$t('theNews.HotRecommendation')}}
        </li>
      </ul>
      <div class="content" v-for="(list,index) in hotList" :key="index">
        <hot-spot :hotSpotInfo="list" :imgHeight="imgHeight"/>
      </div>
    </div>
</template>

<script>
  import hotSpot from '@/components/news/hotSpot'
    export default {
        name: "HotRecommendation",
      data(){
          return{
            imgHeight:0,
          }
      },
      props:{
        hotList:{},
      },
      components:{
        hotSpot:hotSpot,
      },
      methods:{
          getImgHeight(){
            this.imgHeight=document.body.clientWidth/5;
          }
      },
      mounted(){
          this.getImgHeight();
      }
    }
</script>

<style scoped>
#HotRecommendation{
  background: #fff;
  margin-top: 10px;
}
  #HotRecommendation .title{
    text-align: left;
    padding:10px;
    font-size:16px;
    font-weight: bold;
  }
  #HotRecommendation .content{
    border-bottom: 2px solid #f5f5f5;
    margin-left: 10px;
    margin-right: 10px;
  }
  #HotRecommendation .content:last-child{
    border-bottom: 0;
  }
</style>
